<template>
	<view class="mask" @click="closePage()">
		<view class="main">
			<text>选择客服</text>
			<view class="jobTime">工作时间 {{ businessHours }}</view>
			<view class="main-view" @click="onlineKefu()">
				<view class="main-view" @click="onlineKefu()">
					<image src="http://images.linglinggong.net/icon3/2ersfgfdfdvfds.png" mode="aspectFill"></image>
					<text>在线客服</text>
				</view>
			</view>
			<!-- <view class="main-view" @click="Kefuweixin()">
				<image src="../../static/icon3/2ersfgfdfdvfds.png" mode="aspectFill"></image>
				<text>客服微信</text>
			</view> -->
			<view class="main-view" @click="kefu_phone()">
				<image src="http://images.linglinggong.net/static/icon3/1132ewrwrwefdsdsfds.png" mode="aspectFill">
				</image>
				<text>电话客服</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				telephone: '',
				kefu_wechat: '',
				// 客服营业时间
				businessHours: ''
			};
		},
		methods: {
			kefu_phone() {
				this.closePage();
				uni.makePhoneCall({
					phoneNumber: this.telephone
				});
			},
			onlineKefu() {
				this.closePage();
				uni.navigateTo({
					url: '/pages/onLinePage/kefu?userId=' + uni.getStorageSync('userInfo').userId
				});
			},
			Kefuweixin() {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: this.kefu_wechat,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
				// #endif
				// #ifdef H5
				let input = document.createElement('input');
				input.setAttribute('readonly', 'readonly');
				input.setAttribute('value', this.kefu_wechat);
				document.body.appendChild(input);
				input.select();
				if (document.execCommand('copy')) {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
					document.body.removeChild(input);
					//success info
				}
				// #endif
			},
			closePage() {
				this.$emit('closePage');
			},
			// 客服营业时间
			async businessHoursFun() {
				// 进来获取一次 给个动态时间，
				let res = await this.$fetch(this.$api.property_list_by_type_and_key, {
					type: 1,
					key: 'customer_service_date',
				}, 'POST');
				// console.log(res, '我是客服时间------------------------------');
				if (res.code == 0) {
					// console.log(res.data,'是否判断正确，让他进入');
					// 把接口返回的数据赋值给变量
					this.businessHours = res.data; // 7:00~22:30
					uni.setStorageSync('businessHours', res.data);
					// 获取一次时间戳
					// uni.setStorageSync('businessTime',new Date().getTime());
				} else {
					// 防止接口有问题，返回一个死值
					this.businessHours = '7:00~22:30'
					// return '7:00~22:30';
				}
			}
		},
		mounted() {
			// 进入后判断是否和请求的数据和本地的一致就代表后端没有更新新的时间节点
			// let newTime = uni.getStorageSync('businessHours') ? uni.getStorageSync('businessHours') : this
			this.businessHoursFun();
			// this.businessHours = newTime;
			// if (uni.getStorageSync('businessHours')) {
			// 	this.businessHours = uni.getStorageSync('businessHours')
			// } else {
			// 	this.businessHoursFun();
			// }
		},
		beforeMount() {
			this.telephone = uni.getStorageSync('property_list_by_type').telephone;
			this.kefu_wechat = uni.getStorageSync('property_list_by_type').kefu_wechat;
		}
	};
</script>
<style lang="less" scoped>
	.mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.main {
		width: 550rpx;
		height: 530rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&>text:nth-child(1) {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			line-height: 49rpx;
			margin-top: 60rpx;
		}

		// 工作时间
		.jobTime {
			font-size: 30rpx;
			color: black;
			margin-top: 40rpx;
		}
	}

	.main-view {
		width: 438rpx;
		height: 98rpx;
		background: #fcc928;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		margin-bottom: 20rpx;

		&>image {
			width: 60rpx;
			height: 60rpx;
		}

		&>text {
			font-size: 32rpx;
			font-weight: bold;
			color: #402110;
			line-height: 49rpx;
			margin-left: 20rpx;
		}
	}
</style>